<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <pre>
        Flex弹性盒布局：
            对盒子采用更高效方便的控制布局。
        Flex布局支持：
            水平布局
            垂直布局
        Flex布局语法：
            父元素：
              块级元素 display: flex;
              内联元素 display : inline-flex;
              注意：子元素的float、clear和vertical-align都无效
        容器(父元素)属性：
            flex-direction：排列方向：按水平方向排列还是垂直方向排列
                属性值：
                    row             水平方向[从左到右方向][默认值]
                    row-reverse     水平方向[从右到左方向]
                    column          垂直方向[从上到下方向]
                    column-reverse  垂直方向[从下到上方向]
            flex-wrap：同一行放不下，设置换行后的上下排列关系
                属性值：
                    nowrap          不换行[默认值]
                    wrap            换行，第一行在上方
                    wrap-reverse    换行，第一行在下方
            justify-content：主轴水平方向上的对齐方式
                属性值：
                    flex-start    左对齐[默认值]
                    center        居中
                    flex-end      右对齐
                    space-between 两端对齐
                    space-around  项目两侧的间隔相等，项目间隔比项目与边框的间隔大一倍
            align-items：交叉轴垂直方向上对齐方式
                属性值：
                    flex-start    上对齐
                    center        居中
                    flex-end      下对齐
                    baseline      第一行文字的基线对齐
                    stretch       未设置高度或设为auto，将占满整个容器的高度
            align-content：多根轴线的对齐方式[水平排列放不下换行得到垂直方向]
                属性值：
                    flex-start    上对齐
                    center        居中
                    flex-end      下对齐
                    space-between 两端对齐
                    space-around  项目两侧的间隔相等，项目间隔比项目与边框的间隔大一倍
                    stretch       默认占满整个高度
        项目(子元素)属性：
            order：项目的排列顺序。数值越小，排列越靠前，默认为0
                属性值：只能是正整数，负数无效
            flex-grow：项目中除去内容后的剩余空间的放大比例
                属性值：正整数
            flex-shrink：项目中除去内容后的剩余空间的缩小比例
                属性值：正整数
            flex-basis：在定义放大缩小前的默认比例
                属性值：横向就是宽度，纵向就是高  [单位可以是px/rem/百分比]
            align-self：允许单个项目有与其他项目不一样的对齐方式
                属性值：
                    auto 沿用父元素的对齐方式
                    flex-start  容器水平对齐，项目靠左；容器垂直对齐，项目靠上；
                    flex-end    容器水平对齐，项目靠右；容器垂直对齐，项目靠下；
                    center      容器水平对齐，项目水平居中；容器垂直对齐，项目垂直居中；
                    baseline    第一行文字的基线对齐
                    stretch     默认暂满
    </pre>
    <script type="text/javascript" src="js/chapter3.js"></script>
</body>
</html>